梦入琼楼寒有月，行过石树冻无烟

CSS 导航栏

2022-04-21
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
    <head>
        <mata charset="UTF-8">
        <title>Hello,world!</title>
    </head>
    <body>
        <ui>
            <li><a href="#">首页</a></li>
            <li><a href="#">文章</a></li>
            <li><a href="#">归档</a></li>
            <li><a href="#">关于</a></li>
        </ui>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        text-decoration: none;
        display: inline-table;
    }
</style>
<body>
    <ul>
        <li><a href="#" style="text-decoration: none;">首页</a></li>
        <li><a href="#" style="text-decoration: none;">文章</a></li>
        <li><a href="#">归档</a></li>
        <li><a href="#">关于</a></li>
    </ul>
</body>

完善的导航栏

垂直导航栏
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style>
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        background-color: darkgrey;
    }
    li a {
        display: block;
        color: blue;
        padding: 10px 20px;
    }
    li a:hover {
        background-color: teal;
        color: white;
    }
</style>
<body>
    <ul>
        <li><a href="#" style="text-decoration: none;">首页</a></li>
        <li><a href="#" style="text-decoration: none;">文章</a></li>
        <li><a href="#" style="text-decoration: none;">归档</a></li>
        <li><a href="#" style="text-decoration: none;">关于</a></li>
    </ul>
</body>
水平导航栏
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<style>
    ul {
        list-style-type: none;
        overflow: hidden;
        background-color: blue;
    }
    li {
        float: left;
    }
    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 20px 20px;
        text-decoration: none;
    }
    li a:hover {
        background-color: cornflowerblue;
    }
</style>
<body>
    <ul>
        <li><a href="#" style="text-decoration: none;">首页</a></li>
        <li><a href="#" style="text-decoration: none;">文章</a></li>
        <li><a href="#" style="text-decoration: none;">归档</a></li>
        <li><a href="#" style="text-decoration: none;">关于</a></li>
    </ul>
</body>
激活导航栏
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style>
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        background-color: darkgrey;
    }
    li a {
        display: block;
        color: blue;
        padding: 10px 20px;
    }
    .active {
        background-color: blue;
        color: white
    }
    li a:hover {
        background-color: teal;
        color: white;
    }
</style>
<body>
    <ul>
        <li><a href="#" class="active" style="text-decoration: none;">首页</a></li>
        <li><a href="#" style="text-decoration: none;">文章</a></li>
        <li><a href="#" style="text-decoration: none;">归档</a></li>
        <li><a href="#" style="text-decoration: none;">关于</a></li>
    </ul>
</body>

导航栏与文字位置

文字居右
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<style>
    ul {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
        background-color: blue;
    }
    li {
        float: left;
    }
    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 20px 20px;
        text-decoration: none;
    }
    li a:hover {
        background-color: cornflowerblue;
    }
</style>
<body>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">文章</a></li>
        <li><a href="#">归档</a></li>
        <li><a href="#">关于</a></li>
        <li style="float: right;"><a href="#">EN</a></li>
    </ul>
</body>
固定头部
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<style>
    ul {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
        background-color: blue;
		position: fixed;
   		top: 0px;
    	width: 100%;
    }
    li {
        float: left;
    }
    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 20px 20px;
        text-decoration: none;
    }
    li a:hover {
        background-color: cornflowerblue;
    }
</style>
<body>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">文章</a></li>
        <li><a href="#">归档</a></li>
        <li><a href="#">关于</a></li>
        <li style="float: right;"><a href="#">EN</a></li>
    </ul>
		<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>

	<p>
</body>
固定底部
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<style>
    ul {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
        background-color: blue;
		position: fixed;
   		bottom: 0px;
    	width: 100%;
    }
    li {
        float: left;
    }
    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 20px 20px;
        text-decoration: none;
    }
    li a:hover {
        background-color: cornflowerblue;
    }
</style>
<body>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">文章</a></li>
        <li><a href="#">归档</a></li>
        <li><a href="#">关于</a></li>
        <li style="float: right;"><a href="#">EN</a></li>
    </ul>
		<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>

	<p>
</body>

下拉导航栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<style>
    /*正常菜单*/
    ul {
        list-style-type: none;
        overflow: hidden;
        background-color: blue;
    }
    li {
        float: left;
    }
    li a, drop-button {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 20px 20px;
        text-decoration: none;
    }
    li a:hover, .drop-down:hover{
        background-color: cornflowerblue;
    }

    /*下拉菜单开始*/
    .dropdown {
        display: inline-block;
    }
    .drop-downcontent {
        display: none;
		color: #008080;
		position: absolute;
        background-color: blue;
		top: 64px;
        min-width: 250px;
        box-shadow: 0px 10px 20px 0px rgba(0,0,0,0,0.1);
    }
    .drop-downcontent a {
        padding: 20px 20px;
        text-decoration: none;
        display: block;
    }
    .drop-downcontent a:hover {
        background-color: cornflowerblue;   
    }
    .dropdown:hover .drop-downcontent {
        display: block;
    }
</style>
<body>
    <ul>
        <li><a href="#" style="text-decoration: none;">首页</a></li>
        <li><a href="#" style="text-decoration: none;">文章</a></li>
        <li><a href="#" style="text-decoration: none;">归档</a></li>
        <div class="dropdown">
			<li><a href="#" class="drop-button">关于</a></li>
                <div class="drop-downcontent">
                    <a href="#" style="color: white;">创始人团队</a>
                    <a href="#" style="color: white">投资者关系</a>
            </div>
        </div>
    </ul>
</body>
⬅️ Go back